<template>
  <div class="chart-item-container">
    <div ref="storepiechart" class="chart-item"></div>
  </div>
</template>

<script lang="ts">
  import useEcharts from '@/hooks/useEcharts'
  import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
  import { dispose } from 'echarts/core'
  export default defineComponent({
    name: 'Storepiechart',
    props: {
      carStatisticsamount: {
        type: Array,
        default: () => [],
      },
      data: {
        type: Object,
        default: () => {},
      },
    },
    setup(props) {
      const loading = ref(true)
      const storepiechart = ref<HTMLDivElement | null>(null)
      const data = ref<any[]>([])
      const init = () => {
        const option = {
          tooltip: {
            trigger: 'item',
            show: true,
            formatter(params) {
              let str = `<div><div class="tooltip-pie">${params.data.name}</div><div class="tooltip-pie-value">共${params.value}辆</div></div>`
              return str
            },
            className: 'echarts-tooltip-diy',
          },
          graphic: [
            {
              type: 'text',
              id: 'text1',
              left: 'center',
              top: '46%',
              style: {
                text: props.data?.count == 0 ? '暂无数据' : props.data?.outboundCount + '/' + props.data?.count + '辆',
                fill: '#1D2129',
                fontSize: 14,
                fontWeight: 500,
              },
            },
            {
              type: 'text',
              id: 'text2',
              left: 'center',
              top: '55%',
              style: {
                text:
                  props.data?.count && props.data?.outboundCount
                    ? '出库率：' + Math.round((props.data?.outboundCount / props.data?.count) * 100) + '%'
                    : '',
                fill: '#1D2129',
                fontSize: 14,
                fontWeight: 500,
              },
            },
          ],
          series: [
            {
              type: 'pie',
              radius: ['50%', '70%'],
              label: {
                formatter: '{b|{b}} \n {c|{c}辆}',
                rich: {
                  b: {
                    color: '#1E1E1E',
                    fontSize: 12,
                    lineHeight: 14,
                  },
                  c: {
                    color: '#1E1E1E',
                    fontSize: 12,
                    lineHeight: 14,
                  },
                },
              },
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 1,
              },
              data: data.value,
            },
          ],
        }
        loading.value = false
        nextTick(() => {
          useEcharts(storepiechart.value as HTMLDivElement)?.setOption(option)
        })
      }
      watch(
        () => props.carStatisticsamount,
        (value) => {
          console.log('carStatisticsamount', value)
          if (value) {
            data.value = []
            value.forEach((item: any) => {
              data.value.push({
                name: item.tmpName,
                value: item.count,
              })
            })
          } else {
            data.value = []
          }
          init()
        },
        { immediate: true, deep: true }
      )
      const updateChart = () => {
        useEcharts(storepiechart.value as HTMLDivElement)?.resize()
      }
      onMounted(() => {
        init()
        window.addEventListener('resize', () => {
          useEcharts(storepiechart.value as HTMLDivElement)?.resize()
        })
      })
      onBeforeUnmount(() => {
        dispose(storepiechart.value as HTMLDivElement)
      })
      return {
        loading,
        storepiechart,
        updateChart,
      }
    },
  })
</script>

<style lang="less" scoped>
  .chart-item-container {
    width: 100%;
    height: 260px;
    .chart-item {
      height: 100%;
    }
  }
</style>
